<template>
  <div class="h-full flex flex-col">
    <div class="z--1">
      <img src="https://jwc-static.jdwxk.com/imgs/user/bg.png" class="absolute h-full w-full" alt="">
    </div>
    <div class="h-full w-full flex flex-col p-x-5">
      <div class="flex items-center justify-between p-t-8">
        <p class="m-l-5 text-4.5 text-#333">
          {{ userInfo?.name }}
        </p>
        <div class="relative h-15 w-15">
          <!-- <img src="https://jwc-static.jdwxk.com/imgs/user/avatar.png" class="w-15" alt=""> -->
          <van-uploader :after-read="afterRead" :max-count="1">
            <van-image
              round
              width="60px"
              height="60px"
              :src="fileBaseUrl + userInfo.headPic"
            />
            <img src="https://jwc-static.jdwxk.com/imgs/user/edit.png" class="absolute bottom-1 right-0 w-4" alt="">
          </van-uploader>
        </div>
      </div>
      <div class="relative m-t-8 w-full">
        <img src="https://jwc-static.jdwxk.com/imgs/user/box.png" class="w-100%" alt="">
        <div class="absolute top-50% flex translate-y--50% gap-2 text-#FFF3D1">
          <div class="flex items-center gap-1 p-l-5">
            <img src="https://jwc-static.jdwxk.com/imgs/user/star.png" class="w-4" alt="">
            <span>当前积分</span>
          </div>
          <span>{{ userInfo.score }}</span>
        </div>
        <div class="absolute bottom-0 right-0 top-0" @click="handleGoToPointsDetail">
          <div class="relative h-full">
            <img src="https://jwc-static.jdwxk.com/imgs/user/detail.png" class="h-full" alt="">
            <span class="absolute left-55% top-50% text-nowrap text-3 text-#FFD18E -translate-50%">查看明细</span>
          </div>
        </div>
      </div>
      <div class="m-t-3 w-full flex gap-3">
        <div class="h-10 flex-1" @click="showRuleDescription = true">
          <img src="https://jwc-static.jdwxk.com/imgs/user/integral-btn.png" class="flex-1" alt="">
        </div>
        <div class="h-10 flex-1" @click="handleGpToMall">
          <img src="https://jwc-static.jdwxk.com/imgs/user/mall-btn.png" class="flex-1" alt="">
        </div>
      </div>
      <div class="custom-cell m-t-11">
        <van-cell title="兑换中心" is-link to="/redemption-center">
          <template #icon>
            <img src="https://jwc-static.jdwxk.com/imgs/user/redemption-center.png" class="h-5 p-r-3" alt="">
          </template>
        </van-cell>
        <van-cell v-if="isChecker" title="核销" is-link to="/write-off">
          <template #icon>
            <img src="https://jwc-static.jdwxk.com/imgs/user/write-off.png" class="h-5 p-r-3" alt="">
          </template>
        </van-cell>
      </div>
    </div>
    <RuleDescription v-model:show="showRuleDescription" />
    <Loading v-if="loading">
      上传中...
    </Loading>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
import RuleDescription from '@/views/mall/RuleDescription/index.vue'
import { useUserStoreWidthOut } from '@/store/modules/user'
import { updateUserAvatar, uploadFile } from '@/api/system/user'
import Loading from '@/components/Loading/index.vue'
import { compressionFile } from '@/utils/fileUtils'

defineOptions({
  name: 'User',
})

const router = useRouter()
const showRuleDescription = ref(false)
function handleGoToPointsDetail() {
  router.push('/points-detail')
}

function handleGpToMall() {
  router.push('/mall')
}
const fileBaseUrl = import.meta.env.VITE_GLOB_IMG_URL
const userStore = useUserStoreWidthOut()
const userInfo = computed(() => userStore.getUserInfo)
// 是否为核查员
const isChecker = computed(() => userStore.getUserInfo.roles?.includes('ROLE_HX'))

onMounted(() => {
  userStore.GetUserInfo()
})

const loading = ref(false)
async function afterRead(file) {
  // 此时可以自行将文件上传至服务器
  loading.value = true
  try {
    const formData = new FormData()
    const lowFile = await compressionFile(file.file)
    formData.append('file', lowFile)
    const res = await uploadFile(formData)
    if (res.code === 200 && res.data) {
      const data = await updateUserAvatar(userStore.getUserInfo.phone, res.data)
      if (data.code === 200) {
        showToast('上传成功!')
        userStore.GetUserInfo()
      }
      else {
        showToast(data.message)
      }
    }
    else {
      showToast(res.message)
    }
  }
  finally {
    loading.value = false
  }
}
</script>

<style lang="less">
.custom-cell {
  .van-cell {
    --van-cell-background: 'transparent';
    --van-cell-vertical-padding: 20px;
  }
}
</style>
